<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>message</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link href="../../css/font-awesome.min.css" rel="stylesheet" />
		<link href="../../css/app.css" rel="stylesheet" />
		<script src="../../js/mui.min.js"></script>
		<style>
		.circle { 
                position: fixed; 
                text-align: center; 
                margin-right: calc((20% - 65px)/2); 
                right: 0;
                bottom: 18px; 
                width: 65px; 
                height: 65px;
                padding:20px;
                color:#fffff;                
                border-radius: 50px; 
                background: rgba(241, 90, 36, 0.8); 
                z-index: 99; 
        }
        
        .scroll-list-wrapper{
        	    position: absolute;
			    top: 40px;
			    bottom: 0;
			    width: 100%;
			    height: auto;
        }
        .list-top-wrapper{
        		
        	    position: relative;        	   
			    top: 0;
    			bottom: auto;
    			width: 100%;
    			text-align: center;
			    border: 0;
			    border-radius: 0;
			    z-index: 2;
			    background-color: #FFFFFF;
			    padding: 10px 15px;
			    overflow: hidden;
        }
        
        .mui-bar~.mui-content .mui-fullscreen {
				top: 44px;
				height: auto;
			}
        
        .mui-bar~.mui-content .mui-fullscreen {
				top: 44px;
				height: auto;
			}
			.mui-pull-top-tips {
				position: absolute;
				top: -20px;
				left: 50%;
				margin-left: -25px;
				width: 40px;
				height: 40px;
				border-radius: 100%;
				z-index: 1;
			}
			.mui-bar~.mui-pull-top-tips {
				top: 24px;
			}
			.mui-pull-top-wrapper {
				width: 42px;
				height: 42px;
				display: block;
				text-align: center;
				background-color: #efeff4;
				border: 1px solid #ddd;
				border-radius: 25px;
				background-clip: padding-box;
				box-shadow: 0 4px 10px #bbb;
				overflow: hidden;
			}
			.mui-pull-top-tips.mui-transitioning {
				-webkit-transition-duration: 200ms;
				transition-duration: 200ms;
			}
			.mui-pull-top-tips .mui-pull-loading {
				/*-webkit-backface-visibility: hidden;
				-webkit-transition-duration: 400ms;
				transition-duration: 400ms;*/
				
				margin: 0;
			}
			.mui-pull-top-wrapper .mui-icon,
			.mui-pull-top-wrapper .mui-spinner {
				margin-top: 7px;
			}
			.mui-pull-top-wrapper .mui-icon.mui-reverse {
				/*-webkit-transform: rotate(180deg) translateZ(0);*/
			}
			.mui-pull-bottom-tips {
				text-align: center;
				background-color: #efeff4;
				font-size: 15px;
				line-height: 40px;
				color: #777;
			}
			.mui-pull-top-canvas {
				overflow: hidden;
				background-color: #fafafa;
				border-radius: 40px;
				box-shadow: 0 4px 10px #bbb;
				width: 40px;
				height: 40px;
				margin: 0 auto;
			}
			.mui-pull-top-canvas canvas {
				width: 40px;
			}
			.mui-slider-indicator.mui-segmented-control {
				background-color: #efeff4;
			} 


		</style>

	</head>

	<body>
		<div class="circle" id="addBtn">
			<span class="mui-icon mui-icon-plusempty font-color-white"></span>
		</div>
		<div  class="mui-content">
			<div class="mui-fullscreen" style="z-index:1;">
					<div class="list-top-wrapper" style="height:40px;">
						<div style="float:left; text-align: center; font-size: 20px;line-height: 20px;color: #F15A24;">
							<span class="mui-icon mui-icon-info" style="font-size: 20px;line-height: 20px;"></span>
							
						</div>
						
						<div style="float:left; height:20px;">
							<p style="margin-bottom: 0;line-height: 20px;display:none;"  >
								您目前尚未接收案件数：<span id="unrecv">0</span>
							</p>
							<p style="margin-bottom: 0;line-height: 20px;">
								在您前面还有：<span id="waitAudit">0</span>个案件等待处理
							</p>
							
						</div>
						
					</div>
					<div class="scroll-list-wrapper">
						<div class="mui-scroll-wrapper" >
							  <div class="mui-scroll" id="refreshContainer" >
									<!--数据列表-->
									<ul class="mui-table-view mui-table-view-chevron">
					
									</ul>
							  </div>
						</div>
					</div>
			</div>
				
		</div>
		<script src="../../js/jquery-1.12.4.min.js"></script>
		<script src="../../js/mui.lazyload.js"></script>
		<script src="../../js/mui.lazyload.img.js"></script>
		<script src="../../js/mui.pullToRefresh.js"></script>
		<script src="../../js/mui.pullToRefresh.material.js"></script>
		<script src="../../js/app.js"></script>
		<script type="text/javascript">

				mui.init();
				var page = 1;
				/*mui.init({
				  pullRefresh : {
				    container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
				    down : {

				      callback :endPulldownToRefresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
				    },
				    up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				  }
				});*/
				var refreshObj = mui("#refreshContainer").pullToRefresh({
					 down : {
						callback :endPulldownToRefresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
				    },
				    up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				});

				var lazyLoad = mui(document).imageLazyload({
					placeholder: '../../images/60x60.gif',
					force : true
				});	

				function endPulldownToRefresh(){
								var all = plus.webview.all();
								console.log(all.length);
								var current = plus.webview.currentWebview().id;
								for(var i=0;i<=all.length -1 ; i++ ){
								        console.log(all[i].id);

								}
					console.log("----------endPulldownToRefresh----------");
					page = 1;
					app.listCase(page,20,function(data){
							var table = document.body.querySelector('.mui-table-view');
							table.innerHTML = "";
//							mui('#refreshContainer').pullRefresh().refresh(true);     //恢复滚动
//
//						    mui('#refreshContainer').pullRefresh().scrollTo(0,0,100); //滚动置顶

							var caseList = data.result_data;
							console.log(JSON.stringify(caseList));
							
							if(caseList){
								appendList('.mui-table-view',caseList);
								lazyLoad.refresh(true);
								/* mui(document).imageLazyload({
                                	placeholder: '../../images/60x60.gif'
                            });*/
                           
					}
//						mui('#refreshContainer').pullRefresh().endPulldownToRefresh(); //refresh completed
						refreshObj.endPullDownToRefresh();

				},function(){
//						mui('#refreshContainer').pullRefresh().endPulldownToRefresh(); //refresh completed
						refreshObj.endPullDownToRefresh();
				});




				}


			var count = 0;
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				page++;

				app.listCase(page,5,function(data){
						var table = document.body.querySelector('.mui-table-view');
						var caseList = data.result_data;
						if(caseList){

							appendList('.mui-table-view',caseList);
							/* mui(document).imageLazyload({
                                placeholder: '../../images/60x60.gif'
                            });*/
                           lazyLoad.refresh(true);

						}
						if(!caseList || caseList.length <20){
//							mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
							refreshObj.endPullUpToRefresh(true);
						}
						else {
							
//							mui('#refreshContainer').pullRefresh().endPullupToRefresh(false);
							refreshObj.endPullUpToRefresh(false);
						}


				},function(){
						plus.nativeUI.toast("加载出错");
//						mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
						refreshObj.endPullUpToRefresh(true);
				});


			}








				mui(".mui-table-view").on('tap','li',function(e){
					console.log("li is click");
					var CASE_CODE = $(this).attr("CASE_CODE");

					mui.openWindow({
								url:"/html/case/upimage.html",
								id:"/html/case/upimage.html",
								createNew:true,
								show: {
									aniShow: 'pop-in'
								},
								waiting: {
									autoShow: false
								},
								extras:{
										"CASE_CODE":CASE_CODE
			    				},


					});


				});

				mui('#addBtn').on('tap','.mui-icon', function(e) {
						mui.openWindow({
								url:"/html/case/add.html",
								id:"/html/case/add.html",
								createNew:true,
								show: {
									aniShow: 'pop-in'
								},
								waiting: {
									autoShow: false
								}


							});
				});


			function refreshData(){
				if (mui.os.plus) {
				    mui.plusReady(function() {
				      setTimeout(function() {
				        	refreshObj.pullDownLoading();
				      }, 500);

				    });
				  } else
				 {

				     mui.ready(function() {
				    		refreshObj.pullDownLoading();
				    });
				 }

			}
			function appendList(container,caseList){

				/*1-已上传 2-已认领 3-审核通过 4-审核不通过 5-已重传*/

				var table = document.body.querySelector(container);
				for (var i = 0 ; i <= caseList.length-1; i++) {
								var li = document.createElement('li');
								$(li).attr("CASE_CODE",caseList[i].CASE_CODE);
								var imageHtml = "";
								if(caseList[i].THUMB_PATH){
									imageHtml = '<img class="mui-media-object mui-pull-left img80" data-lazyload="' + app.SERVER_URL + caseList[i].THUMB_PATH + '" src="../../images/60x60.gif">';

									//imageHtml = '<img class="mui-media-object mui-pull-left img80" src="' + caseList[i].THUMB_PATH + '">';
								}else {
									imageHtml = '<img class="mui-media-object mui-pull-left img80" src="../../images/60x60.gif">' ;
								}
								var statusName = "";
								var statusClass = "";
							    if(caseList[i].FLAG == "0"){
							    	statusName = "待上传"; //yellow
							    	statusClass = "uploading";
							    }else if(caseList[i].FLAG == "1" || caseList[i].FLAG == "2"||caseList[i].FLAG == "5" ){
							    	statusName = "待审核";//blue
							    	statusClass = "auditing";
							    }else if(caseList[i].FLAG == "3"){
							    	statusName = "审核通过";
							    	statusClass = "success";
							    	console.log(caseList[i].AUDIT_FLAG +'-------' +caseList[i].CASE_CODE );
//							    	if(caseList[i].AUDIT_FLAG=="1"){
//							    		statusClass = "success"; //gree
//							    		statusName = "通过";
//							    	}else if(caseList[i].AUDIT_FLAG == "2") {
//							    		statusClass = "failed";
//							    		statusName = "不通过";
//							    	}
//							    	else{
//
//							    	}
							    }else if(caseList[i].FLAG == "4"){
							    	statusClass = "failed";
							    	statusName = "不通过";
							    }



								li.className = 'mui-table-view-cell';
								li.innerHTML = '<div class="mui-navigate-right">' +
													imageHtml +
													'<div class="mui-media-body">'+
														caseList[i].CASE_CODE +
														'<p class="mui-ellipsis case-info">'+
															'<span class="auto-no">车牌号:'+caseList[i].AUTO_NO+ '</span> '+
															'<span class="status-info">状态:<span class="' +statusClass + '">'+statusName+ ' </span></span> '+
														'</p>'+

														'<p class="mui-ellipsis photo-info">'+

															'<span class="count">照片数:'+caseList[i].PHOTO_NUM+ '</span> '+
															/*'<span class="qualified">通过数:'+caseList[i].SUCESS_COUNT+ '</span> '+
															'<span class="no-qualified">未通过数:'+caseList[i].FAILED_COUNT+ '</span> '+*/
														'</p>'+

														'<p class="mui-ellipsis">'+
															'<span><i class="fa fa-clock-o"></i>'+caseList[i].CREATE_TIME+ '</span> '+

														'</p>'+
													'</div>'+
												'</div>';
								table.appendChild(li);
				}
			}
			
			function refreshTip(){
//				console.log("timer running");
				
				
				
				
				app.getQueueCount(function(data){
					var result_data = data.result_data;
					var unRevCount   = result_data.unRevCount;
					var waitAuditCount = result_data.waitAuditCount;
					$("#unrecv").html(unRevCount);
                    $("#waitAudit").html(waitAuditCount);
				},
				function(){
					$("#unrecv").html(0);
                    $("#waitAudit").html(0);
				});
				
			}

			window.addEventListener('refreshList', function() {
					console.log('refreshList');
					refreshData();
			}, false);
			
			var timerObj = null;
			
			timerObj = setInterval(refreshTip,5000);			
			window.addEventListener('onLogin', function() {
				console.log('receive onLogin');
				refreshData();
				if(timerObj){
					clearInterval(timerObj);
				}
				timerObj = setInterval(refreshTip,5000);				
				
			},false);
			
			
			
							
				
		</script>
	</body>

</html>    